﻿@model  ScadaWeb.Model.ScadaMachineTrainingForecastModel
@{
    ViewBag.Title = "历史工况查询";
    Layout = "~/Views/Shared/_LayoutList.cshtml";
}

<!--模糊搜索区域-->
<div class="layui-row">
    <form class="layui-form layui-col-md12 ok-search" lay-filter="formTest">
        <div class="layui-input-inline">
            <label class="layui-form-label">IO筛选</label>
        </div>
        <div class="layui-input-inline">
            <select name="ServerId" id="ServerId" placeholder="请选择采集站" lay-filter="ServerId"></select>
        </div>

        <div class="layui-input-inline">
            <select name="CommunicationId" id="CommunicationId" placeholder="请选择通道" lay-filter="CommunicationId"></select>
        </div>

        <div class="layui-input-inline">
            <select name="DeviceId" id="DeviceId" placeholder="请选择设备" lay-filter="DeviceId"></select>
        </div>


        <div class="layui-input-inline">
            <input class="layui-input" placeholder="开始日期" autocomplete="off" name="StartDate" id="StartDate" value="@Model.StartDate" style="width:140px;">

        </div>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="结束日期" autocomplete="off" name="EndDate" id="EndDate" value="@Model.EndDate" style="width:140px;">
        </div>

        @Html.SearchBtnHtml("查询")


    </form>
</div>
<!--数据表格-->
<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>

<script>
   

    layui.use(["table", "form", "okLayer", "okUtils","laydate"], function () {
        let table = layui.table;
        let form = layui.form;
 
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        var tablePlug = layui.tablePlug;
        let startdate = layui.laydate;
        let enddate = layui.laydate;
        var $ = layui.$;
 
        startdate.render({
            elem: '#StartDate'
       , type: 'datetime'
        });
        enddate.render({
            elem: '#EndDate'
          , type: 'datetime'
        });
 
      

        let AllTable = table.render({
            elem: "#tableId",
            url: "/Scada/MachineTraining/GeneralHistoryMachineTrainingList",
            limit: 1000,
            limits: [100, 200, 300, 500, 600, 800, 1000, 1500, 2000, 3000],
            width: document.body.clientWidth - 10,
            height: 'full-80',
            page: true,
            loading: true,
            id: 'tableId',
            toolbar: "#toolbarTpl",
            jump: function (obj, first) {
                if (!first) {
                    layer.msg('第 ' + obj.curr + ' 页');
                }
            },
            size: "sm",
       
            cols: [[
                { field: 'zizeng', width: 60, title: '序号', fixed: 'left', templet: '#zizeng' },
                { field: "TaskName", title: "任务名称", width: 140, fixed: 'left' },
                { field: "ForecastLabel", title: "工况", width: 120 },
                { field: "ForecastDate", title: "时间", width: 140 },
                { field: "ForecastColumnValues", title: "输入值", width: 120 },
                { field: "ForecastColumnNames", title: "输入参数", width: 120 },
                { field: "Algorithm", title: "实现算法", width: 120 },
                { field: "AlgorithmType", title: "算法分类", width: 120 },
                { field: "ForecastScore", title: "分数评价", width: 120 },
                { field: "DeviceName", title: "设备", width: 120 },
                { field: "CommunicationName", title: "通道", width: 120 },
                { field: "ServerId", title: "采集站", width: 120 }
            ]],
            done: function (res, curr, count) {
             }
        });
        
        form.on("submit(search)", function (data) {

            AllTable.reload({
                where: data.field,
                page: { curr: 1 }
            });
            return false;
        });
        GetStations();
        form.on('select(ServerId)', function (data) {
            GetCommunication();
        });
        form.on('select(CommunicationId)', function (data) {
            GetDevice();
        });

        function GetStations() {

            $("#ServerId").empty();
            $("#ServerId").append("<option value=''>请选择采集站</option>");
            //加载采集站类型
            $.get("/Scada/ScadaGeneral/GetStations", function (result) {

                for (var i = 0; i < result.data.length; i++) {

                    $("#ServerId").append("<option value='" + result.data[i].SERVER_ID + "'>" + result.data[i].SERVER_ID + "</option>");
                }

                layui.form.render("select");
                //重新渲染select
                form.render('select');
                GetCommunication();

            });
        }
        function GetCommunication() {

            $("#CommunicationId").empty();
            $("#CommunicationId").append("<option value=''>请选择通道</option>");
            //加载通道类型
            $.get("/Scada/ScadaGeneral/GetCommunications", { "serverid": $("#ServerId").val() }, function (result) {


                for (var i = 0; i < result.data.length; i++) {

                    $("#CommunicationId").append("<option value='" + result.data[i].IO_COMM_ID + "'>" + result.data[i].IO_COMM_LABEL + "[" + result.data[i].IO_COMM_LABEL + "]" + "</option>");
                }

                layui.form.render("select");
                //重新渲染select
                form.render('select');
                GetDevice();

            });
        }
        function GetDevice() {
            $("#DeviceId").empty();

            $("#DeviceId").append("<option value=''>请选择设备</option>");
            //加载通道类型
            $.get("/Scada/ScadaGeneral/GetDevices", { "serverid": $("#ServerId").val(), "communicationid": $("#CommunicationId").val() }, function (result) {


                for (var i = 0; i < result.data.length; i++) {
                    $("#DeviceId").append("<option value='" + result.data[i].IO_DEVICE_ID + "'>" + result.data[i].IO_DEVICE_NAME + "[" + result.data[i].IO_DEVICE_LABLE + "]" + "</option>");
                }

                layui.form.render("select");

                //重新渲染select
                form.render('select');

            });
        }
    })
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">

    <label><i class="ok-icon" style="color:red;">&#xe670;</i>注意:此处查询的是所有历史工况预测信息。</label>
</script>
 
<script type="text/html" id="zizeng">
    {{d.LAY_TABLE_INDEX+1}}
</script>

 


